<script setup>
import { ref, onMounted } from 'vue';
import _api from "@/common/api/user";
import { ElMessage } from 'element-plus'
import UserList from './components/UserList.vue';
import UserAdd from './components/UserAdd.vue';
import UserEdit from './components/UserEdit.vue';
import UserSearch from './components/UserSearch.vue';

const items = ref([])
const addDialog = ref(null)
const editDialog = ref(null)
const search = ref(null)


const showAddDialog = () => {
    addDialog.value.showDialog()
}

const showEditDialog = (item) => {
    editDialog.value.showDialog(item)
}

const deleteAsync = async (id) => {
    try {
        await _api.deleteAsyncList(id)
        ElMessage({
            message: '删除成功',
            grouping: true,
            type: 'success',
        })
    } catch (error) { } finally {
        refresh()
    }
}

const getSearch = (data) => {
    items.value = data
}

const refresh = () => {
    search.value.getItems()
}



getSearch()

</script>

<template>
    <user-search @searched="getSearch" ref="search">
        <user-list :items="items">
            <template #action-bar="scope">
                <span class="caozuo" @click="showEditDialog(scope.row)">
                    <i class="iconfont icon-xiugai" />
                </span>
                <span class="caozuo" @click="deleteAsync(scope.row.id)">
                    <i class="iconfont icon-shanchu" />
                </span>
            </template>
        </user-list>
        <template #action-bar-action>
            <el-button type="primary" @click="showAddDialog">新 增</el-button>
        </template>
    </user-search>

    <user-add ref="addDialog" @added="refresh" />
    <user-edit ref="editDialog" @edited="refresh" />
</template>

<style lang="scss" scoped>
.caozuo {
    cursor: pointer;
}
</style>